<template>
	<view class="recycle-progress-component">
		<view class="recycle-progress-content">
			<view class="progress-header">
				<view class="progress-title">回收流程</view>
				<!-- #ifdef MP-WEIXIN -->
				<button open-type="contact" class="service-btn">
					<text>联系客服</text>
					<image class="icon-kefu" src="@/static/images/icon_progress_right.png"></image>
				</button>
				<!-- #endif -->
				<!-- #ifndef MP-WEIXIN -->
				<view class="service-btn" @click="$emit('service')">
					<text>联系客服</text>
					<image class="icon-kefu" src="@/static/images/icon_progress_right.png"></image>
				</view>
				<!-- #endif -->
			</view>
			<view class="progress-body">
				<view class="progress-images">
					<view class="progress-image">
						<image class="icon-progress" mode="widthFix" src="https://s1.huishoubao.com/static/activeH5/pdf/wx_process_img01.png"></image>
					</view>
					<view class="progress-image">
						<image class="icon-progress" mode="widthFix" src="https://s1.huishoubao.com/static/activeH5/pdf/wx_process_img02.png"></image>
					</view>
					<view class="progress-image">
						<image class="icon-progress" mode="widthFix" src="https://s1.huishoubao.com/static/activeH5/pdf/wx_process_img03.png"></image>
					</view>
					<view class="progress-image">
						<image class="icon-progress" mode="widthFix" src="https://s1.huishoubao.com/static/activeH5/pdf/wx_process_img04.png"></image>
					</view>
				</view>
				<view class="progress-texts">
					<view class="progress-text">估价下单</view>
					<view class="progress-right">
						<image class="icon-progress-right" src="/static/images/icon_progress_right.png"></image>
					</view>
					<view class="progress-text">寄出机器</view>
					<view class="progress-right">
						<image class="icon-progress-right" src="/static/images/icon_progress_right.png"></image>
					</view>
					<view class="progress-text">专业质检</view>
					<view class="progress-right">
						<image class="icon-progress-right" src="/static/images/icon_progress_right.png"></image>
					</view>
					<view class="progress-text">极速收款</view>
				</view>
			</view>
			<view class="progress-footer">
				<view class="progress-faq-list">
					<view
						v-for="(item, index) in faqList"
						:key="index"
						class="progress-faq-item"
						@click="chooseFaq(item)"
					>
						<view class="faq-header">
							<view class="faq-question">{{ item.question }}</view>
							<image
								src="/static/images/icon_progress_down.png"
								class="icon-progress-down"
								:class="{
									active: item.id === selectFaq
								}"></image>
						</view>
						<view v-show="item.id === selectFaq" class="faq-body">
							<view class="faq-answer">
								<view
									v-for="(text, idx) in item.answer"
									:key="idx"
									class="answer-text"
								>{{ text }}</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data () {
		return {
			selectFaq: '',
			faqList: [
				{
					id: '1',
					question: 'Q: 发货时要注意什么？',
					answer: [
						'顺丰上门取件是【免费】的，自主发货可选择快递到付，都不需要您支付快递费用喔～机器寄往平台前建议您按照下方的注意事项操作，来确保最高价格最快的卖出机器：',
						'1、邮寄前将机器做好数据备份并把【各类账号和密码清除】；',
						'2、机器的手机壳、配件（充电器、耳机）、sim卡等无需寄出，请自行妥善保管。',
						'3、建议邮寄时保持机器有电的状态，便于更快质检；',
						'4、若您是自行寄件，请一定要在包裹内做好防护，避免机器在运输过程中出现损失。并在包裹中留小纸条，写上订单编号及下单手机号，以免快递单号填错无法联系到您。'
					]
				},
				{
					id: '2',
					question: 'Q: 质检后价格不满意怎么办？',
					answer: [
						'如果质检后价格低于您的预估价，且不愿意进行售卖，可在订单详情里点击取消订单并确认退货地址。平台将有客服与您确认，并在48小时内为您包邮退货。若质检后价格高于或者等于预估价，系统将自动打款，完成交易。'
					]
				},
				{
					id: '3',
					question: 'Q: 多久可以卖出？',
					answer: [
						'快速邮寄【1～3天】->机器质检【24小时】->确认交易后【1小时】付款。'
					]
				}
			]
		}
	},
	methods: {
		chooseFaq (item) {
			if (item.id === this.selectFaq) {
				this.selectFaq = ''
			} else {
				this.selectFaq = item.id
			}
		}
	}
}
</script>

<style lang="scss" scoped>
@import './index.scss';
</style>